<template>
	<view @click="mask = false" style="height: 100vh;">
		<view class="bgcaolor pad-lr-20 over-hid">
			<view class="radius-20 bgfff password_view over-hid">
				<view class="fontSize-32 mar-top-50 text-align-center">请设置6位数字密码</view>
				<view class="pwd-box clearfix">
					<view class="pwd-text" v-for="(item,index) in 6" :key="index" :data-index="index" :class="{active:(activeInput == index)}" @click.stop="openmask(index)">{{payPassWord[index]}}</view>
				</view>
			<view class="col-f text-align-center radius-40 fontSize-32 qurybtn" @click="submit">
				{{is_set_password==1?'修改密码':'确认'}}
			</view>
			</view>
		</view>
		<view class="keyboard-modal" v-show="mask" @click.stop="">
			<view class="keyboard keyboard-show">
				<view class="key-box clearfix">
					<view class="num" v-for="item in digitalList" :key="item" :class="{'no-num':(item === '' || item === '-1')}"
					 @click="getKeyNumber(item)">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
// import { setPayPwd} from '@/utils/api'
import { computed, ref } from 'vue';
onLoad((options)=>{
	is_set_password.value = options.is_set_password
})
const is_set_password = ref()
const mask = ref(true)
const openmask =(index:number) =>{
	mask.value = true
}
const paymentPwd=  ref('')
const digitalList = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '-1'])//键盘
const payPassWord = computed(()=>{
	var payPassWord =paymentPwd.value.split('') || [];
	payPassWord.fill('*');
	return payPassWord;
})
const activeInput = ref(0)
const getKeyNumber =(val) =>{
				let paymentPwdArr =paymentPwd.value.split('');
				if (val === '' || (val != -1 && paymentPwdArr.length === 6)) {
					if(paymentPwdArr.length === 6){
						// submit();
						return ;
					}
					return false;
				} else if (val != -1) { //数字输入
					paymentPwdArr.splice(activeInput.value, 0, val);
					activeInput.value++;
					paymentPwd.value = paymentPwdArr.join('');
					if(paymentPwdArr.length === 6){
						// submit();
						return ;
					}
				} else { //删除
					if (activeInput.value >= 0) {
						activeInput.value !== 0 && activeInput.value--;
						paymentPwdArr.splice(activeInput.value - 1, 1);
						paymentPwd.value = paymentPwdArr.join('');
					}
				}
			}
const submit =(clickFlag)=>{
			setPayPwd({pay_pwd:paymentPwd.value}).then(res=>{
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				if(res.code==1){
				paymentPwd.value = '';
				activeInput.value = 0;
				mask.value = false
				}
			})
			}
</script>

<style lang="scss">
@import 'setpassword.scss';
</style>
